<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
  	  <script src="/js/vue.js"> </script> 
 	  <script src="../js/axios.min.js"></script>

     <link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    

  </head>
  <body>
   
    <div id="app">
      
<!-- UI -->

      <n-nav></n-nav>
      <div class="jumbotron jumbotron-fluid"style="   background-color: rgba(134, 143, 135, 0.5);">
        <div class="container">
            <h1 class="display-3">排班</h1>
            <span class="badge badge-pill badge-primary">线上排班系统</span>
        </div>
    </div>
       <div class="container-fluid">
        <div class="row">
          <!-- 科室 -->
          
        <div class="col-4">
          <ul  v-for="(item, index) in deptList" :key="index" class="list-group">
            <li v-if="item.rank=='2'" class="list-group-item"><a @click="next(index)" class="nav-link" href="#">{{item.name}}</a></li> 
        </ul>
        </div>
        


        <div class="col-8">

          
          <table class="table text-center table-bordered" style="background: rgb(238, 238, 235); color:rgb(0, 0, 0);">
            <thead style="background: rgb(235, 234, 234); color:rgb(0, 0, 0);" >
                <tr class="fs-6">
                    <th colspan="2">医生</th>
                    <th colspan="2">星期一<br>{{data1}}</th>
                    <th colspan="2">星期二<br>{{data2}}</th>
                    <th colspan="2">星期三<br>{{data3}}</th>
                    <th colspan="2">星期四<br>{{data4}}</th>
                    <th colspan="2">星期五<br>{{data5}}</th>
                    <th colspan="2">星期六<br>{{data6}}</th>
                    <th colspan="2">星期日<br>{{data7}}</th>
                </tr>
                <tr >
                  <th>编号</th>
                  <th>姓名</th>
                  <th>上午</th>
                  <th>下午</th>
                  <th>上午</th>
                  <th>下午</th>
                  <th>上午</th>
                  <th>下午</th>
                  <th>上午</th>
                  <th>下午</th>
                  <th>上午</th>
                  <th>下午</th>
                  <th>上午</th>
                  <th>下午</th>
                  <th>上午</th>
                  <th>下午</th>
                </tr>
            </thead>
            
            <tbody v-for="(item, index) in doctordeptlist" :key="index">
              <template>
                <tr  v-if="item.deptid.id===dqks">
                  <th>{{item.doctorid.id}}</th>
                  <th>{{item.doctorid.name}}</th>
                  <th></th>
                  <th></th>
                  <th ></th>
                  <th></th>
                  <th ></th>
                  <th></th>
                  <th ></th>
                  <th></th>        
                  <th ></th>
                  <th></th>
                  <th ></th>
                  <th></th>
                  <th ></th>
                  <th></th>
                </tr>
              </template>
            </tbody>
            
        </table>
        <div class="float-right">
            <nav  aria-label="Page navigation example">
              <ul class="pagination justify-content-center" >
                <li class="page-item"><a class="page-link" href="#"> &lt;  上一周排班</a></li>
                <li class="page-item"><a class="page-link" href="#">本周排班</a></li>
                <li class="page-item"><a class="page-link" href="#">下一周排班&gt;</a></li>
              </ul>
            </nav>
            </div>
            
            <body>
              <div class="container">
                  <div class="control-group">
                      <div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                          <input class="text" size="16" type="text" v-model="data1"   readonly>
                          <span class="add-on"><i class="icon-remove" >清空</i></span>
                          <span class="add-on"><i class="icon-th">打开</i></span>
                          <a @click="queding(index)" class="nav-link" href="#">确定</a>
                        
                      </div>
                      <input type="hidden" id="dtp_input2" value="" /><br/>
                  </div>
              </div>




        </div>
      </div>
      </div>
<!-- 1 -->


<!-- Modal -->

        </div>
       
        






    
    

    

<!-- JS -->
      <script >
        Vue.component('n-nav',{
          data() {
            return { 
              title:'中心医院',
              isss:[{name:'挂号',href1:'yuyue.html'},
              {name:'医生排班',href1:'paiban.html'},
              {name:'收费',href1:'charge.html'},
              {name:'发票统领',href1:'charge.html'}],
              qita:['投诉','加入我们','联系我们'],
            }
          },
          methods:{
            next(a){
              dqks=a;
            },
          
          },
          computed:{},
          template:`  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            <a class="navbar-brand" href="index.html">{{title}}</a>
            <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#"> <span class="sr-only">(current)</span></a>
                    </li>
                    
                        <a class="nav-link" href="yuyue.html">病人挂号</a>
                        <a class="nav-link" href="charge.html">结账收费</a>
                        <a class="navbar-brand" href="paiban.html">医师排班</a>
                        <a class="nav-link" href="bill.html">票据统领</a>
                        
                   
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">关于我们</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownId">
                            <a class="dropdown-item" href="#"> 加入我们</a>
                            <a class="dropdown-item" href="#">联系我们</a>
                            <a class="dropdown-item" href="#">投诉</a>
                        </div>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="医生，门诊">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                </form>
            </div>
        </nav>`});
        new Vue({
            el:'#app',
            data:{

            deptList:'',
            doctordeptlist:'',
               thisDate:'',//当前月份
               dqks:1,
               
       
               data1:'',
               data2:'',
               data3:'',
               data4:'',
               data5:'',
               data6:'',
               data7:'',


              
                
            },
            methods:{
            next(a){
              console.log(a);
              this.dqks=a;
            },
              queding(){
              console.log("不知到") ;
              console.log(data1) ;
              let a= Date.parse(new Date(this.data1))
               this.data1=formatDate(a);
               this.data2=formatDate(a+86400000*1);
               this.data3=formatDate(a+86400000*2);
               this.data4=formatDate(a+86400000*3);
               this.data5=formatDate(a+86400000*4);
               this.data6=formatDate(a+86400000*5);
               this.data7=formatDate(a+86400000*6);
               console.log(this.data1) ;
            },
          },
          computed:{

          },
          // vue 的生命中期中的回调函数、钩子函数
          created(){
            // 向服务端请求 
            let url1='/dept';
            let url2='/doctordept';
 
            axios.get(url1)
            .then(res => {
              console.log(res)
              this.deptList=res.data;

              // 获取系统当前时间
              let aData = new Date().getTime()
               this.data1=formatDate(aData);
               this.data2=formatDate(aData+86400000*1);
               this.data3=formatDate(aData+86400000*2);
               this.data4=formatDate(aData+86400000*3);
               this.data5=formatDate(aData+86400000*4);
               this.data6=formatDate(aData+86400000*5);
               this.data7=formatDate(aData+86400000*6);
              
               
          		
               





            })
            .catch(err => {
              console.error(err); 
            }),
            
            axios.get(url2)
            .then(res => {
              console.log(res)
              this.doctordeptlist=res.data;
              
            })
            .catch(err => {
              console.error(err); 
            })

          },
          mounted() {
            
          },
          
            
            
        })


      </script>
      
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script type="text/javascript">
   
	$('.form_date').datetimepicker({
        language:  'zh-CN',
        format: 'yyyy-mm-dd',//显示格式
        weekStart: 1,
        todayBtn:  1,
        minView: "month",
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0,
       
        
    });
	
    function formatDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}




    //使用当前输入框中的值更新日期时间选择器。
    function update(){
        $('#datetimepicker').datetimepicker('update');
    }
    //显示日期时间选择器。
    function show(){
        $('#datetimepicker').datetimepicker('show');
    }

    //移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。
    function remove(){
        $('#datetimepicker').datetimepicker('remove');
    }

    //隐藏日期时间选择器。
    function hide(){
        $('#datetimepicker').datetimepicker('hide');
    }

    $('datetimepicker').datetimepicker({
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd',//显示格式
        minView: "month",//设置只显示到月份
        initialDate: new Date(),
        todayBtn: true,//显示今日按钮
        autoclose: true,//选中自动关闭
        locale: moment.locale('zh-cn')
    });




</script>

   
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    </body>
</html>